<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解决HTML中多空格显示一个</title>
</head>
<body>

  <div>
    <span>我中间有5个     空格</span>

    <pre>我中间有5个     空格</pre>
    <pre><a id="a1">我(a1)中间有5个     空格</a></pre>

    <a id='a2'>我(a2)中间有5个     空格</a>
    <br>
    <a id='a3'>我(a3)中间有5个     空格</a>
  </div>

  <script>
    // 方法一，使用pre标签
      // pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
    const a1 = document.getElementById('a1');
    a1.onclick = function() {
      alert('我是a1')
    }

    // 方法二，使用white-spsace: pre|pre-wrap
      // pre: 空白(包括换行)会被浏览器保留, 其行为方式类似HTML中的<pre>标签
      // pre-wrap: 保留空白符序列，但是正常地进行换行
    const a2 = document.getElementById('a2');
    // a2.style.whiteSpace = 'pre';
    a2.style.whiteSpace = 'pre-wrap';
    a2.onclick = function() {
      alert('我是a2')
    }

    // 方法三，使用使用字符&nbsp;代替空格
    const a3 = document.getElementById('a3');
    // 获取文本
    const text = a3.innerHTML || a3.textContent;
    // \s会匹配所有空白符(包括换行)
    // const regText = /[\s]/g;
    // \S会匹配非空白符(不包括换行)
    const regText = /[^(\S\n)]/g;
    const _text = text.replace(regText, '&nbsp;');
    a3.innerHTML = _text;
    a3.onclick = function() {
      alert('我是a3')
    }
    
  </script>
</body>
</html>